import Qt 4.7
import "ColumnHelper.js" as ColumnHelper

Rectangle {
    id: page
    width: 350
    height: 350
    color: "cyan"

    XmlListModel {
        id: xmlModel
        source: "http://api.reittiopas.fi/hsl/prod/?user=zouba&pass=caf9r3ee&request=route&format=xml&language=en&epsg_in=wgs84&epsg_out=wgs84&from=24.7765,60.2046&to=24.8825483159,60.1618275013&show=5&walkspeed=2&optimize=4"
        query: "/response/node/node"

        XmlRole { name: "length"; query: "length/string()" }
        XmlRole { name: "duration"; query: "duration/string()" }
        XmlRole { name: "depTime"; query: "legs/node[1]/locs/node[1]/depTime/string()" }
        XmlRole { name: "arrTime"; query: "legs/node[last()]/locs/node[1]/arrTime/string()" }
        XmlRole { name: "legs"; query: "legs" }
    }

    ListView {
        id: list
        anchors.fill: parent
        property variant columnWidths: ColumnHelper.calcColumnWidths(model, list)

        orientation: "Vertical"
        model: xmlModel
        delegate: routeDelegate
    }

    Component {
        id: routeDelegate
        Item {
            id: item
            width: parent.width - 15
            height: row.height

            function altColor(i) {
                var colors = [ "#bebebe", "#b7b7b7" ];
                return colors[i];
            }

            Rectangle {
                id: background
                width: parent.width + 15
                height: parent.height
                color: altColor(index%2)
            }

            Row {
                id: row
                width: parent.width
                spacing: 5
                Item {
                    // Indent a little
                    width: 5
                    height: 1
                }
                Text {
                    width: list.columnWidths['length']
                    text: model.length
                    color: "blue"
                }
                Loader { sourceComponent: columnSeparator; height: parent.height }
                Text {
                    width: list.columnWidths['duration']
                    text: model.duration
                }
                Loader { sourceComponent: columnSeparator; height: parent.height }
                Text {
                    width: list.columnWidths['depTime']
                    text: model.depTime
                }
                Loader { sourceComponent: columnSeparator; height: parent.height }
                Text {
                    width: list.columnWidths['arrTime']
                    text: model.arrTime
                }

                Component {
                    id: columnSeparator
                    Rectangle {
                        width: 1
                        color: "black"
                        opacity: 0.3
                    }
                }
            }
        }
    }
}
